<template>
    <layout>
    <h2>部门／院系管理</h2>
    <hr />
    <br />
    <el-button type="primary" @click="open">新增部门／院系</el-button>
    <br></br>
    <el-table :data="tableData" border stripe style="width: 80%">
    	<el-table-column  prop="no" label="部门编号" width="120"></el-table-column>
    	<el-table-column prop="name" label="部门名称" width="150"></el-table-column>
    	<el-table-column label="操作">
    		<template scope="scope">
    			<el-button type="text" size="small" @click="Edit">编辑</el-button>
    			<el-button type="text" size="small" @click="Delete">删除</el-button>
    		</template>
    	</el-table-column>	
    </el-table>
    </layout>
</template>

<script>

import Layout from './Home.vue'
export default{
	components:{
		Layout
	},
    data(){
      return {
      	tableData:[
      		{
      			no:'1',
      			name:'信息工程系'
      		},
      		{
      			no:'2',
      			name:'教务处'
      		}
      	]
      }
    },
    methods:{
    	open(){
    		this.$prompt('请输入部门名称','提示',{
    			confirmButtonText:'确定',
    			cancelButtonText:'取消',
    			inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          		inputErrorMessage: '部门格式不正确'
    		})
    	},
    	Edit(){
    		
    	},
    	Delete(){
    		this.$confirm('确定删除吗?', '警告', {
          		confirmButtonText: '确定',
          		cancelButtonText:'取消',
          		type: 'warning'
          	})
    	}
    }
    
}
</script> 
<style>

</style>